<template>
  <div class="createCource">
    <div class="course-top">
      <div class="top-left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>智慧体育课堂</el-breadcrumb-item>
          <el-breadcrumb-item>我的班级</el-breadcrumb-item>
          <el-breadcrumb-item>班级详情</el-breadcrumb-item>
        </el-breadcrumb>

      </div>
      <div @click="back" class="top-right">
        返回
      </div>
    </div>
    <div class="classMessage">
      <div class="messageTeacherInfo" v-loading="isLoading">
        <div class="info-item" v-if="classMessage.headTeacher">
          <div class="item-teacher">{{classMessage.headTeacher}}</div>
          <div class="item-role">班主任</div>
        </div>
        <div class="info-item" v-if="classMessage.sportTeacher">
          <div class="item-teacher">{{classMessage.sportTeacher}}</div>
          <div class="item-role">体育任课老师</div>
        </div>
      </div>
      <div class="messageTable" v-loading="isLoading">
        <div class="message-title">
          <div class="title-name">班级名单</div>
          <div class="title-count">共{{total}}人</div>
        </div>
        <div class="table">
          <div class="table-top">
            <el-table
              :data="classMessage.stuList"
              style="width: 100%"
            >
              <el-table-column
                prop="stuName"
                label="学生姓名"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="stuStudentId"
                align="center"
                label="学号"
              >
              </el-table-column>
              <el-table-column
                prop="stuStaNum"
                align="center"
                label="学籍号"
              >
              </el-table-column>
              <el-table-column
                label="性别"
                align="center"
              >
                <template slot-scope="scope">
                  {{scope.row.stuSex == 1 ? '男' : '女'}}
                </template>
              </el-table-column>
              <el-table-column
                prop="stuMz"
                align="center"
                label="民族"
              >
              </el-table-column>
              <el-table-column
                prop="stuBornDate"
                label="出生年月"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="是否免测"
                align="center"
              >
                <template slot-scope="scope">
                  <el-switch
                    @change="changeIsExempt(scope.row)"
                    v-model="scope.row.stuIsExempt"
                    active-value="1"
                    :inactive-value="'0'"
                    active-color="#13ce66"
                  >
                  </el-switch>
                </template>

              </el-table-column>

            </el-table>
          </div>
          <div class="table-page">
            <pagination-page @size="changeSize" @page="changePage" :total="total" />
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {classMessageAndStudent} from "@/api/school/class";
import {studentDoFirst} from "@/api/school/student";

export default {
  data() {
    return {
      classMessage:{
        headTeacher:"",
        sportTeacher:"",
        stuList:[]
      },
      pageInfo:{
        classId:this.$route.query.classId,
        pageS:10,
        pageN:1
      },
      total:0,
      isLoading:false
    };
  },
  created() {
    this.getClassMessage()
  },
  methods: {
    changeIsExempt(row) {
      this.isLoading = true;
      console.log({
        stuId: row.stuId,
        type: "0",
        status: row.stuIsExempt,
      })
      studentDoFirst({
        stuId: row.stuId,
        type: "0",
        status: row.stuIsExempt,
      }).then((response) => {
        if (response.code === 200) {
          this.isLoading = false;
        }
      });
    },
    getClassMessage(){
      this.isLoading = true
      classMessageAndStudent(this.pageInfo).then(response=>{
        this.isLoading = false
        if(response.code == 200){
          this.classMessage = response.result;
          this.total = response.total
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back(){
      this.$router.back()
    },
    changeSize(size){
      this.pageInfo.pageS = size;
      this.getClassMessage()
    },
    changePage(page){
      this.pageInfo.pageN = page;
      this.getClassMessage()
    }
  }
}
</script>

<style lang="scss" scoped>
.createCource {
  width: 80vw;
  margin: auto;
  .course-top {
    display: flex;
    justify-content: space-between;
    padding: 1vh 0;
    ::v-deep .el-breadcrumb__inner {
      font-size: 1vw;

    }
    .top-right {
      font-size: 1vw ;
      color: #1677FF;
    }
  }
  .classMessage {
    height: 80vh;
    .messageTeacherInfo {
      height: 12vh;
      background: #fff;
      border-radius: .5vw;

      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
      display: flex;
      align-items: center;
      .info-item {
        margin-left: 1vw;
        display: flex;
        flex-direction: column;
        padding: 1vw 2vw;
        align-items: center;
        justify-content: center;
        border: .1vw solid #95C1FF;
        box-sizing: border-box;
        border-radius: .4vw;
        .item-teacher {
          color: #1677FF;
          font-size: 1.2vw;
        }
        .item-role {
          color: #666666;
          font-size: 1vw;
          margin-top: .5vh;
        }
      }
    }
    .messageTable {
      margin-top: 2vh;
      height: 63vh;
      background: #fff;
      border-radius: .5vw;

      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07);
    }
  }
}
.table {
  height: 63vh;
  max-height: 63vh;
  background: #fff;
  .table-top {
    padding: 2vw;
    width: 100%;
    height: 50vh;
    max-height: 60vh;
    overflow-y: auto;
    ::v-deep .el-table th, .el-table tr  {
      background: #FAFAFA;
      color: #3D3D3D;
    }
  }
  .table-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
  }
}
.message-title {
  display: flex;
  margin-left: 2vw;
  height: 4vh;

  align-items: end;
  .title-name {
    font-size: 1.5vw;
    margin-top: 1vh;
  }
  .title-count{
    margin-left: 1vw;
    font-size: 1.1vw;
    color: #999999;
    margin-top: 1vh;
  }
}
</style>
